/*
Theme Name: thaotien
Theme URI: http://thammyvienthaotien.com
Author: thaotien
Author URI: http://thammyvienthaotien.com
Description: http://thammyvienthaotien.com
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
Credit: http://www.templatemo.com
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: "Times New Roman",Arial, Helvetica, sans-serif;
	font-size: 1.1em; 
	color: #392a31;
	background: #854370 url(images/bg.jpg) top right repeat fixed;
	background-size:100%;
	max-height:500px;
	text-align:left;
}
		
a:link, a:visited { color: #a54c77; text-decoration: none; } 
a:active, a:hover { color: #a54c77; text-decoration: underline; }

p,ul,li,div,span { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; max-width:100%}

.clear { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.clear20 { clear: both; width: 100%; height: 20px; font-size: 0px;  }
.hidden{
	visibility: hidden;
	height:1px;
}

#wrapper-outer {
	max-width:1236px;
	background:url(images/border_left.png) left repeat-y;
	margin:auto;
}
#wrapper-inner {
	
	background:url(images/border_right.png) right repeat-y;

}
#inner{
	max-width:1200px;
	margin-left:18px;
	background-color:rgba(247,220,238,0.5);	
}

/* ========================================== body =================================*/
#supportonline{
	border:2px solid #5272b7;
	border-radius:10px;
	background-color:#fff;
	padding:5px;
	width:226px;
}
#supportonline img{
	width:230px;
}
#supporttitle
{
	font-size:24px;	
}
.box1{
	float:left;
	max-width:400px;
	width:100%;
	margin-left:20px;
	margin-right:20px;
}
.box1 .service-item{
	width:196px;
}
.box-title{
	text-transform: uppercase;
	border-bottom: 2px solid #a54c77;
	height:1.3em;
	font-size: 1.5em;
	color:#884263;
	background:url(images/nav1.png) right top no-repeat;
}
	.box{
	padding:0 20px;
	}
.box-image, .box-content{
	float:left;
}
.box-image{
	margin-right: 10px;
	padding:4px;
	background-color:#d9aecb;
	border:1px solid #f7dfef;
	line-height:0;
}
.box-image img{
	border: 1px solid #a54c77;
	width:386px;
	height:216px;
}
.box-content{
	max-width:390px;
	text-align: justify;
}
.box-content #title{
	font-size: 1em;
	font-weight:bold;
	color: #a54c77;
}
.box-image-cover{
	margin-right:8px;
	float:left;
	
}
.box-image-title{
	margin-top:10px;
	text-align:center;
	color:#a54c77;
	font-weight:bold;
}
.box-image-title h3{
	margin:auto;
}
.box-image-cover  .box-image{
	float:none;
}

.box2{
	float:left;
	max-width:260px;
	width:100%;
	margin-left:20px;
}

.video-item{
	margin-top:4px;
	background-color:#d9aecb;
	border:1px solid #f7dfef;
	
}
.video-item:hover{
background-color:#fff;
	border:1px solid #d9aecb;
	
}
.video-item #nav{
	float:left;
	background: url(images/nav2.png) center center no-repeat;
	border-right: 1px solid #c990b2;
	width:30px;
	height:30px;
	padding-top:10px;
	
}
.video-item #content{
	padding-top:10px;
	padding-left:10px;
	float:left;
	font-weight:bold;
	border-left: 1px solid #e3bed7;
	height:30px;
	
}

.box-content h2,.box-content h3{
	margin:auto;
	line-height: 1 em;
	font-size: 1.0em;
}
.keywords{
	margin-top:10px;
}
.keywords h2,.keywords b,.keywords span{
	float:left;
	margin:auto;
	line-height: 1 em;
font-size: 1.0em;
}
.course #description{
	text-align:justify;
}
.box .box-item{
	text-align:justify;
}
.videoimage{
	height: 115px !important;
	width:auto !important;
}
/* ========================================== header =================================*/
#header{
	position:absolute;
	top:0px;
	
}
#banner{
	margin-top:46px;
}
#header-menu{
	background:#e435a3 url(images/top_bg.png) right no-repeat;;
	height:43px;
	border-bottom: 3px solid #bf0d83;
	position: absolute;
width: 100%;
}
#banner-shadow{
	height:420px;
	background: url(images/banner-shawdow.png) 0 408px no-repeat;
}
nav{
	color:#fff;
	font-size:1.325em;
}
nav a:link,nav a:hover, nav a:visited{
	color:#fff;
	text-decoration:none;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}
nav ul li ul {
	background-color:#c7168a;
	margin-top:-2px;
}

nav ul {
	z-index:100;
	padding: 0 10px;	
	list-style: none;
	position: relative;
	display: inline-table;
}
nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
}
nav ul li:hover {
	background: #c7168a;
}
nav ul li ul li:hover {
	background: #e435a3;
}

nav ul li a#plus {
	display: block; padding: 6px 5px;
	text-decoration: none;
}

nav ul li a {
	display: block; padding: 11px 21px;
	text-decoration: none;
}
			
		
nav ul ul {
	 padding: 0;
	position: absolute; top: 100%;
}
nav ul ul li {
	float: none; 
	position: relative;
}
nav ul ul li a {
	padding: 11px 40px;
	
}	

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}
.menu-more{
	display:none;
}
#customer-review{
	position:absolute;
	color:#a54c77;
	margin-top: -120px;
	margin-left: 10px;
}
#customer-review #title{
	font-size: 1.4em;
	text-transform: uppercase;
	margin-bottom:10px;
}
#customer-review .quote{
	margin-left: -40px;
	font-size:5em;
	line-height:1em;
	font-family: "MS Mincho";
	margin-top:-10px;
	float:left;
}
#customer-review #content{
	width: 725px;
	font-size:1.15em;
	float:left;
	margin-top:-5px;
}
#customer-review #customername{
	float:right;
	font-style:italic;
	font-size:1.0em;
}
/* ========================================== footer =================================*/
#footer{
	margin-top:30px;
	background: url(images/banner-shawdow.png)no-repeat;
	background-color: rgba(101,32,79,0.8);
	color:#f7dcee;
	
}
.coso{
	float:left;
	margin-left:30px;
	height:40px;
	padding-top:30px;
	font-weight:bold;
	background: url(images/footer_underline.png) 3px 50px no-repeat;
}
.footer-address{
	padding-top:20px;
	height:50px;
	float:left;
	margin-left:30px;
}
#footer-bg{
	float:right;
	background: url(images/bottom_bg.png) no-repeat;
	width:227px;
	height:77px;
	margin-right:120px;
}
.footer-address a:hover{
	color:#fff;
	font-style:italic;
}
.footer-address a, .footer-address a:visited{
	color:#fff;
	
}

/*
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%

a=6
b=1
n=4
t=n*(a+b)=28
*/

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 21% {
   opacity:1;visibility:visible;
 }
 25% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 21% {
   opacity:1;visibility:visible;
 }
 25% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 21% {
   opacity:1;visibility:visible;
 }
 25% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 21% {
   opacity:1;visibility:visible;
 }
 25% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

#banner img {
-webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 28s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 28s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 28s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 28s;
cursor:pointer;
position:absolute;
opacity:1;

}

#banner img:nth-of-type(1) {
   -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -o-animation-delay: 21s;
  animation-delay: 21s;
}
#banner img:nth-of-type(2) {
   -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -o-animation-delay: 14s;
  animation-delay: 14s;
}
#banner img:nth-of-type(3) {
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -o-animation-delay: 7s;
  animation-delay: 7s;
}

#banner img:nth-of-type(4) {
   -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}